<template>
    <div>
        <van-nav-bar title="账户资料"
                    left-text=""
                    left-arrow
                    @click-left="jump">
        </van-nav-bar>
        <div class="bottom-list">
            <div v-for="(item,index) in listarr"
                :key="index"
                v-bind="name">
            <div class="listitem">
                {{item.name}}
                <span class="headpic" v-show="item.index == 1">
                    <el-avatar :size="40"
                                :src="circleUrl">
                   </el-avatar>
                </span>
                <span v-show="item.index == 2" class="liststyle">张三</span>
                <span v-show="item.index == 3" class="liststyle">张三</span>
                <span v-show="item.index == 4" class="liststyle">{{tel}}</span>
                <span v-show="item.index == 5" class="liststyle">{{sex}}</span>
                <span v-show="item.index == 6" class="liststyle">{{birth}}</span>
                <span class="icon">
                <font-awesome-icon icon="chevron-right" />
                </span>
            </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      tel: '189****4790',
      sex: '男',
      birth: '1990-01-01',
      listarr: [
        {
          name: '头像',
          index: 1
        },
        {
          name: '姓名',
          index: 2
        },
        {
          name: '昵称',
          index: 3
        },
        {
          name: '手机号',
          index: 4
        },
        {
          name: '性别',
          index: 5
        },
        {
          name: '出生日期',
          index: 6
        },
        {
          name: '个性标签',
          index: 7
        },
        {
          name: '登录密码',
          index: 8
        },
        {
          name: '支付密码',
          index: 9
        }
      ]
    }
  },
  methods: {
    jump () {
      this.$router.push({ path: '/Mine' })
    }
  }
}
</script>

<style scoped>
.van-nav-bar {
  background-color: rgb(114, 202, 205);
}
::v-deep .van-icon,
::v-deep .van-nav-bar__text,
::v-deep .van-ellipsis {
  color: #fff;
}
.bottom-list {
  padding-bottom: 1rem;
  color: #778899;
}
.listitem {
  position: relative;
  height: 5rem;
  line-height: 5rem;
  padding-left: 30px;
  border-bottom: rgba(128, 128, 128, 0.178) solid 1px;
}
.listitem svg {
  float: right;
  height: 100%;
  margin-right: 25px;
}
.headpic {
    position: absolute;
    right:50px;
    top:10px
}
.liststyle{
    position: absolute;
    right:50px;
}
</style>
